<template>
  <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">

      <el-form-item label="类型" prop="type">
        <el-radio-group v-model="dataForm.type">
          <el-radio :label="1">目录</el-radio>
          <el-radio :label="2">菜单</el-radio>
          <el-radio :label="3">按钮</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="名称" prop="name">
        <el-input v-model="dataForm.name" placeholder="名称"></el-input>
      </el-form-item>


      <el-form-item v-if="dataForm.type != 1" :style="{position: 'relative'}" label="上级菜单"
        prop="parentId">

        <el-input v-model="dataForm.parentName" :readonly="true" placeholder="点击选择上级菜单" class="menu-list__input" @focus="showCard = !showCard"></el-input>
        <el-card :style="{
                  position: 'absolute',
                  zIndex: '1000',
                  width: '100%',
                  height: '35vh',
                  overflow: 'scroll'}"
          v-show="showCard" class="box-card">
          <el-tree :data="menuList" :props="defaultProps" node-key="menuId" ref="menuListTree" @current-change="menuListTreeCurrentChangeHandle"
            :default-expand-all="true" :highlight-current="true" :expand-on-click-node="false"></el-tree>
        </el-card>

      </el-form-item>

      <el-form-item label="权限" prop="permissions" v-if="dataForm.type == 3">
        <el-input v-model="dataForm.permissions" placeholder="权限标识"></el-input>
      </el-form-item>

      <el-form-item label="ReqUri" prop="reqUri" v-if="dataForm.type == 3">
        <el-input v-model="dataForm.reqUri" placeholder="请求路径"></el-input>
      </el-form-item>

      <el-form-item label="图标" prop="ico">
        <el-input v-model="dataForm.ico" placeholder="图标"></el-input>
      </el-form-item>

      <el-form-item label="PC标识" prop="pcName">
        <el-input v-model="dataForm.pcName" placeholder="PC功能名"></el-input>
      </el-form-item>

      <el-form-item label="Pages" v-if="dataForm.type != 3" prop="jumpPath">
        <el-input v-model="dataForm.jumpPath" placeholder="跳转路径"></el-input>
      </el-form-item>

      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="dataForm.sort" label="排序"></el-input-number>
      </el-form-item>

      <el-form-item label="状态" prop="state">
        <el-radio-group v-model="dataForm.state">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {
    treeDataTranslate
  } from '@/utils'
  export default {
    data() {
      return {
        visible: false,
        showCard: false,
        dataList: [],
        menuList: [],
        tempKey: -666666, // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        dataForm: {
          id: 0,
          name: '',
          parentName: '',
          pcName: '',
          type: 2,
          permissions: '',
          parentId: 0,
          sort: 0,
          state: 1,
          reqUri: '',
          ico: '',
          jumpPath: ''
        },
        dataRule: {
          name: [{
            required: true,
            message: '名称不能为空',
            trigger: 'blur'
          }],
          type: [{
            required: true,
            message: '类型不能为空',
            trigger: 'blur'
          }],
          permissions: [{
            required: true,
            message: '权限标识不能为空',
            trigger: 'blur'
          }],
          parentId: [{
            required: true,
            message: '目录不能为空',
            trigger: 'blur'
          }],
          sort: [{
            required: true,
            message: '排序不能为空',
            trigger: 'blur'
          }],
          state: [{
            required: true,
            message: '状态不能为空',
            trigger: 'blur'
          }],
          reqUri: [{
            required: true,
            message: '请求路径不能为空',
            trigger: 'blur'
          }],
          jumpPath: [{
            required: true,
            message: '跳转路径不能为空',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      init(id) {
	  Object.assign(this.dataForm, this.$options.data().dataForm)
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$http({
            url: this.$http.adornUrl('/sys/menu/applist'),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({
            data
          }) => {
            this.menuList = treeDataTranslate(data, 'id')
          }).then(() => {
			this.$refs.menuListTree.setCheckedKeys([])
            if (this.dataForm.id) {
              this.$http({
                url: this.$http.adornUrl(`/sellerapp/appsysmenu/info/${this.dataForm.id}`),
                method: 'get',
                params: this.$http.adornParams()
              }).then(({
                data
              }) => {
                if (data && data.code === 0) {
                  this.dataForm.name = data.appSysMenu.name
                  this.dataForm.permissions = data.appSysMenu.permissions
                  this.dataForm.type = data.appSysMenu.type
                  this.dataForm.parentId = data.appSysMenu.parentId
                  this.dataForm.parentName = data.appSysMenu.parentName
                  this.dataForm.pcName = data.appSysMenu.pcName
                  this.dataForm.sort = data.appSysMenu.sort
                  this.dataForm.state = data.appSysMenu.state
                  this.dataForm.reqUri = data.appSysMenu.reqUri
                  this.dataForm.ico = data.appSysMenu.ico
                  this.dataForm.jumpPath = data.appSysMenu.jumpPath
                  this.menuListTreeSetCurrentNode();
                }
              })
            }
          })

        })
      },
      // 菜单树选中
      menuListTreeCurrentChangeHandle(data, node) {
        this.dataForm.parentId = data.id;
        this.dataForm.parentName = data.name;
        this.showCard = false
      },
      // 菜单树设置当前选中节点
      menuListTreeSetCurrentNode() {
        this.$refs.menuListTree.setCurrentKey([this.dataForm.parentId]);
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/sellerapp/appsysmenu/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'id': this.dataForm.id || undefined,
                'name': this.dataForm.name,
                'permissions': this.dataForm.permissions,
                'type': this.dataForm.type,
                'parentId': this.dataForm.type == 1 ? 0 : this.dataForm.parentId,
                'sort': this.dataForm.sort,
                'state': this.dataForm.state,
                'reqUri': this.dataForm.reqUri,
                'ico': this.dataForm.ico,
                'pcName': this.dataForm.pcName,
                'jumpPath': this.dataForm.jumpPath
              })
            }).then(({
              data
            }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
